<template>
    <div class="mine">
        <div class="mine-bg"></div>
        <div class="mine-content">
            <div class="content-header">
                <div class="header-img">
                    <img :src="userImg" alt="">
                </div>
                <div class="header-info">
                    <h3>
                        {{accountData.nickName?accountData.nickName:"这人很懒，什么也没留下"}}
                    </h3>
                    <p>
                        {{accountData.desc?accountData.desc:"这人很懒，什么也没留下"}}
                    </p>
                </div>
            </div>
        </div>
        <div class="mine-cell" v-if="islogin">
            <van-cell title="个人资料" is-link @click="golink('Personal')" />
            <van-cell title="我的订单" is-link @click="golink('Order')" />
            <van-cell title="我的收藏" is-link @click="golink('Collection')" />
            <van-cell title="收货地址" is-link @click="golink('AddressList')" />
            <van-cell title="安全中心" is-link @click="golink('Safe')" />
        </div>

        <van-button v-if="!islogin" class="btn-login" type="primary" block size="large" color="#0c34ba" @click="golink('Login')">登录账号
        </van-button>

    </div>
</template>

<script>
    import '../assets/scss/Mine.scss';

    export default {
        name: 'Mine',
        data() {
            return {
                islogin: false,
                accountData: {},
                userImg: ""
            }
        },
        created() {
            if (localStorage.getItem('__tk')) {
                this.islogin = true;
                this.getAccountInfo();
            }
        },
        methods: {
            golink(name) {
                this.$router.push({
                    name,
                    // params: {
                    //     pid
                    // }
                });
            },
            // 获取个人信息
            getAccountInfo() {
                // /findAccountInfo
                this.axios({
                    method: 'GET',
                    url: '/findAccountInfo',
                    params: {
                        appkey: this.appkey,
                        tokenString: localStorage.getItem('__tk')
                    }
                }).then(res => {
                    console.log(res);
                    if (res.data.code === "B001") {
                        this.accountData = res.data.result[0];
                        this.userImg = res.data.result[0].userImg;
                    }

                }).catch(err => {
                    console.log(err);
                })
            }
        },
    }
</script>
<style>
    .btn-login {
        width: 80%;
        border-radius: 25px;
        margin: 20px auto;
    }

    .header-img {
        overflow: hidden;
    }

    .header-img img {
        width: 100%;
        height: 100%;
    }
</style>